/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.s1107.com
* @Contact: QQ:2487937004
*/
<template>
  <div class="order">
    <div class="order-item" v-for="(item, index) in list" :key="index">
      <div class="order-title flex-between">
        <span class="order-date">申请时间 2019-05-20 16:44:59</span>
        <span>已完成</span>
      </div>
      <div class="order-info flex">
        <div class="order-info-left">
          <image :src="item.headimgurl" mode="widthFix" />
        </div>
        <div class="order-info-right">
          <p>{{item.user_name}}</p>
          <p>所属上级</p>
        </div>
      </div>
      <div class="order-order flex-between">
        <span class="order-ordernum ellipsis">订单号{{item.ordernumber}}</span>
        <div class="order-money flex">
          <span>交易金额&nbsp;&nbsp;¥</span>
          <i>{{item.total_price}}</i>
        </div>
      </div>
    </div>
    <loadMore :loadingType="loadingType"></loadMore>
  </div>
</template>

<script>
let params = {
  size: "5",
  page: 1
};
export default {
  data() {
    return {
      pageShow: false,
      page: 1,
      isMore: false,
      list: [],
      isLoading: false,
      loadingType: 0
    };
  },
  
  onReachBottom() {
    this.loadMoreFunc();
  },
  onPullDownRefresh() {
    this.$nextTick(() => {
      this.getDistributionOrderList(
          {
            size: "5",
            page: 1
          },
          true
      );
    });
  },
  onLoad() {
    this.getDistributionOrderList(params);
  },
  methods: {
    getDistributionOrderList(data, refrash) {
      if (this.page == 1) {
        this.$loading();
      }
      this.$http
          .getDistributionOrderList(data)
          .then(res => {
            if (res.status === 200) {
              this.$hideLoading();
              if (refrash) {
                this.list = res.data.orderes.data;
                this.loadingType = 0;
                return false;
              }
              if (res.data.orderes.data.length == 0) {
                // console.log(12346789)
                this.loadingType = 2;
                return false;
              }
              this.list = this.list.concat(res.data.orderes.data);
              this.loadingType = 0;
            }
            // uni.stopPullDownRefresh();
          })
          .catch(() => {
            // uni.stopPullDownRefresh();
          });
    },
    loadMoreFunc: function() {
      // 加载函数
      if (this.loadingType == 1 || this.loadingType == 2) {
        return false;
      }
      this.loadingType = 1;
      // console.log(999999)
      ++this.page;
      params.page = this.page;
      this.$nextTick(() => {
        this.getDistributionOrderList(params);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
page {
  padding-top: 20upx;
  background: #f4f6f9;
}
.order-item {
  height: 336upx;
  margin: 0 24upx 20upx 24upx;
  border-radius: 10upx;
  background-color: #fff;
}
.order-item:first-child {
  margin-top: 0;
}
.order-title {
  height: 90upx;
  line-height: 90upx;
  padding: 0 41upx 0 23upx;
  font-size: 28upx;
  border-bottom: 1upx solid #e8e8e8;
}
.order-date {
  color: #555;
  font-size: 28upx;
}
.order-info {
  height: 156upx;
  border-bottom: 1upx dashed #e8e8e8;
  image {
    width: 90upx;
    height: 90upx;
    border-radius: 50%;
    margin: 34upx 20upx 0 26upx;
  }
}

.order-info-right {
  font-size: 28upx;
  color: #999;
  margin-top: 34upx;
}
.order-info-right p {
  height: 28upx;
}
.order-info-right p:nth-of-type(1) {
  margin-bottom: 36upx;
}
.order-order {
  height: 90upx;
  line-height: 90upx;
  padding: 0 24upx;
}
.order-ordernum {
  width: 470upx !important;
  font-size: 26upx;
  color: #999;
}
.order-money {
  display: flex !important;
  font-size: 26upx;
  color: #545454;
  
  span,
  i {
    font-style: normal;
    font-size: 26upx;
  }
}
</style>
